<template>
  <div>
    <!-- 轮播图 -->
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide class="slide-1">
          <!-- <img src="/image/swipe1.jpg" alt=""> -->
        </swiper-slide>
        <swiper-slide class="slide-2">
          <!-- <img src="/image/swipe2.jpg" alt=""> -->
        </swiper-slide>
        <swiper-slide class="slide-3">
          <!-- <img src="/image/swipe3.jpg" alt=""> -->
        </swiper-slide>
        <swiper-slide class="slide-4">
          <!-- <img src="/image/swipe4.jpg" alt=""> -->
        </swiper-slide>
        <swiper-slide class="slide-5">
          <!-- <img src="/image/swipe5.jpg" alt=""> -->
        </swiper-slide>
        <div
          class="swiper-pagination swiper-pagination-white"
          slot="pagination"
        ></div>
        <div
          class="swiper-button-prev swiper-button-white"
          slot="button-prev"
        ></div>
        <div
          class="swiper-button-next swiper-button-white"
          slot="button-next"
        ></div>
      </swiper>
      <div class="select">
        <input type="text" placeholder="接种姓名/关键字/疫苗名" />
        <button>立即查询</button>
      </div>

  </div>
</template>

<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'
export default {
  
  name: 'swiper-example-fade-effect',
  title: 'Fade effect',
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      swiperOption: {
        autoplay:true,
        loop: true,
        spaceBetween: 30,
        effect: 'fade',
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      },
    }
  },
}
</script>

<style lang="scss" scoped>

.swiper {
  margin: 0px auto;
  width: 1820px;
  height: 620px;
    & img{
      width: 100%;
      
    }  
    .swiper-slide {
      background-position: center;
      background-size: cover;
      &.slide-1 {
        background-image:url('/img/index2/swipe1.jpg')
      }
      &.slide-2 {
        background-image:url('/img/index2/swipe2.jpg')
      }
      &.slide-3 {
        background-image:url('/img/index2/swipe3.jpg')
      }
      &.slide-4 {
        background-image:url('/img/index2/swipe4.jpg')
      }
      &.slide-5 {
        background-image:url('/img/index2/swipe5.jpg')
      }
    }
  }
  .select {
  box-shadow: 0 0 10px gray;
  width: 1180px;
  height: 120px;
  background: #fff;
  border-bottom: 5px solid #842331;
  position: relative;
  margin: -60px auto;
  z-index: 1;
}
.select input {
  width: 690px;
  height: 40px;
  border-radius: 5px;
  border: 1px solid #aaa;
  position: absolute;
  top: 40px;
  left: 60px;
  padding-left:20px;
}
.select button {
  width: 170px;
  height: 45px;
  border-radius: 4px;
  border: 1px solid #aaa;
  color: #fff;
  background: url(/img/index2/sicon_03.png) #842331 no-repeat 0 center;
  position: absolute;
  right: 60px;
  top: 40px;
  cursor: pointer;
}
</style>
